Skip to content

Exercises

Alright, let's get some hands-on practice!

The exercises in this module work a bit differently. We can't use the typical embedded playground because Next.js is a full-stack framework, and we need a server!

Instead, you'll be given two options for most of the exercises in this module:

  1. Local development, on your machine
  2. Online, using CodeSandbox

Local Development

Option 1 is to download the code onto your computer and run a local development server.

Fortunately, this process is quite similar to the one we followed when running a local dev server in the Wordle and Toast Component projects.

Here's the flow:

  1. Download the code from Github, either by forking the repository, or downloading a .zip file. A link will be provided for each of the exercises below.
  2. cd into the newly-created folder that contains all of the files.
  3. run npm install to install all of the dependencies.
  4. run npm run dev to start a local development server.

For a more detailed runthrough of these steps, it might be helpful to refer to the “Local Development” instructions 👀 from the Wordle project. That project uses Parcel, not Next.js, but the local development instructions are the same.

Running on CodeSandbox

For Option 2, you'll need to sign up for a free account (opens in new tab) with CodeSandbox in order to make any edits.

I should also warn you, you might run into some issues with CodeSandbox. It uses a VM to run Node.js in the browser, which is an incredible accomplishment, but may still have some kinks.

If you run into any issues with CodeSandbox, you can always run the code locally instead.

Server Timestamp

Back in the early days of the web, it was common for websites to add a timestamp to the bottom of the page, to show exactly when the HTML page was generated.

For example, Codeforces (opens in new tab) has been doing this since 2010!

Screenshot of a footer showing the “server time”, May/02/23 16:03

Let's add a timestamp to a basic Next.js starter app!

Screenshot of a “hello world” website showing a similar “server timestamp” in the footer

Acceptance Criteria:

  • Add a <footer> tag that shows a timestamp.
  • The time should reflect when the page was generated. Refreshing the page should re-generate the page, and update the timestamp.
  • The JavaScript code should only run on the server, not the client.
  • To format the time, you can use the toLocaleString() method on a date object:
const timestamp = new Date().toLocaleString();

Getting Started:

As I mentioned above, you have two options to work on this exercise:

Solution:

Note: Even if you solved this problem without issue, you might want to watch the solution video anyway: we dig into the HTML sent by Next, and some of the nice things it does. ✨

Hit Counter

Let's create a hit counter using Next.js!

In a production app, we'd store the # of hits in a database. To keep things simple for us, we'll read and write from a locally-stored JSON file:

// /src/database.json
{
  "hits": 0
}

If you've never tried to read or write files inside Node.js before, don't worry! I've provided a couple of handy helper methods inside /src/helpers/file-helpers.js. You'll find a small example of how to use these methods in the project's page.js file.

Acceptance criteria:

  • The current number of hits should be shown. The current number should be read from the database.json file.
  • Visiting the site should increment the number by 1. This new number should be saved by overwriting the database.json file.
  • Note that you'll need to convert between strings and objects with JSON.parse and JSON.stringify.

Link to exercise code:

Solution: